<template>
  <div>
    <table-search
      ref="tableSearch"
      title="线下采购订单"
      selection
      :columns="columns"
      :api="getList"
      :tabs-options="tabsOptions"
      @selection-change="onSelectionChange"
    >
      <div slot="table-title" style="text-align: right; flex: 1">
        <el-button
          type="primary"
          size="mini"
          @click="onExport"
          :disabled="!selection.length"
          >导出所选订单</el-button
        >
      </div>

      <template #orderTime="{ row }">
        {{ row.orderTime }}
      </template>
      <template #purchasePrice="{ row }"> {{ row.purchasePrice }}元 </template>
      <template #salePrice="{ row }"> {{ row.salePrice }}元 </template>

      <template #orderState="{ row }">
        <div class="hasEdit" v-if="row.updateState == 1">
          <span class="text">改</span>
        </div>
        <p>
          {{ code2name(row.orderState, orderStatusList) }}
        </p>
      </template>

      <template #payBackState="{ row }">
        <p>
          {{ row.payBackState == 1 ? '已回款' : '未回款' }}
        </p>
      </template>

      <template #operate="{ row }">
        <router-link
          :to="`/admin/PO/detail?id=${row.purchaseOrderId}`"
          target="_blank"
        >
          <el-button type="text" size="small">查看详情</el-button>
        </router-link>
      </template>
    </table-search>
  </div>
</template>

<script>
import {
  defineComponent,
  computed,
  reactive,
  getCurrentInstance,
  ref,
} from '@vue/composition-api'
import TableSearch from '@/components/TableSearch/TableSearch'
import { createTableColumns } from '@/components/TableSearch/utils'
import dict from '@/lib/dict'

import { pageAdmin, orderCountAdmin } from '@/api/PO'
import { downLoadFile } from '@/lib/utils'
import Http from '@/lib/http'

const { orderStatusList } = dict

export default defineComponent({
  components: {
    TableSearch,
  },
  setup() {
    const instance = getCurrentInstance()

    const columns = computed(() => {
      return createTableColumns([
        ['订单编号', 'orderId', { search: true }],
        ['业务类型', 'businessType', { search: true }],
        [
          '下单时间',
          'orderTime',
          { search: { key: ['startTime', 'endTime'] }, width: 160 },
        ],
        ['采购金额(元)', 'purchasePrice'],
        ['订单金额(元)', 'salePrice'],
        ['客户名称', 'clientUnitName', { search: true }],
        ['收货地址', 'address'],
        ['订单状态', 'orderState'],
        ['回款状态', 'payBackState'],
        ['业务员', 'clientName', { search: true }],
        ['操作', 'operate'],
      ])
    })

    const tabsOptions = reactive({
      list: [{ code: '', desc: '全部采购单' }, ...orderStatusList],
      data: {},
      searchKey: 'orderState',
    })

    const code2name = (code, list) => {
      for (const item of list) {
        if (item.code == code) {
          return item.desc
        }
      }
    }

    const getList = async (pageIndex, pageSize, query) => {
      getOrderCount()
      const result = await pageAdmin(pageIndex, pageSize, query)
      return result
    }

    const getOrderCount = async () => {
      const result = await orderCountAdmin()
      getDataCount(result)
    }

    const getDataCount = async result => {
      const dataKeyMap = {
        1: 'waitShipCount',
        2: 'waitReceiptCount',
        3: 'confirmReceiptCount',
        99: 'finishCount',
        0: 'cancelCount',
        '': 'totalCount',
      }
      const data = {}
      tabsOptions.list.forEach(item => {
        data[item.code] = result[dataKeyMap[item.code]]
      })
      tabsOptions.data = data
    }

    const selection = ref([])
    const onSelectionChange = val => {
      selection.value = val
    }

    const onExport = () => {
      downLoadFile(
        Http.getUrl(
          `/manage/offline/exportOrderExcel?purchaseOrderIds=${selection.value.map(
            item => item.purchaseOrderId
          )}`
        )
      )
    }

    return {
      columns,
      getList,
      tabsOptions,
      orderStatusList,
      code2name,
      onSelectionChange,
      onExport,
      selection,
    }
  },
})
</script>

<style lang="scss" scoped>
.hasEdit {
  position: absolute;
  top: 0;
  left: 0;
  &::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 30px solid red;
    border-right: 30px solid transparent;
  }
  .text {
    position: absolute;
    top: -3px;
    left: 2px;
    color: #fff;
    font-size: 12px;
  }
}
</style>

